// 声明依赖于Vue开发 把代码包裹起来
(function (Vue) {
	// 1.new 一个实例
	new Vue({
		el:"#todoapp",
		data:{
			//数据不能够写死了 重新来
           /*todos:[
			 {
				id:1,
				title:"吃饭",
				done:true
			 },
			 {
				id:2,
				title:"睡觉",
				done:false
			 },
			 {
				id:3,
				title:"工作",
				done:true
			 }
		   ]*/
		   //数据从本地里面读取  由于第一次读取 防止没有数据 给一个空的
		   //todos:window.localStorage.getItem("todos")||'[]' 得到的是一个字符串 统一给字符串
		   //将来要当成数组来使用 字符串转数组 对象 SON.parse()
		   todos: JSON.parse(window.localStorage.getItem("todos")|| '[]')
		},
		//监视数据  监视data里面的数据 
		/*
		  watch 监视
		  可以监视data中的数据成员
		  当data中的数据成员发生改变时候 会自动执行该方法 
		  当watch 监视是对象或数组时，只能监听到数组增加或者删除，但无法检测到数组成员属性变化
		   此时需要深度监视才可以
		*/
		watch:{
			// 监视数据的成员 是一个函数 只要todos发生变化 该方法就会自动执行
			/*
			todos:function(){
				// console.log("ok");
				// 实现本地存储 储存在本地硬盘上
				window.localStorage.setItem("todos",JSON.stringify(this.todos));
			}
			*/
			// 深度监视
			todos:{
				// 当todos改变时候会自动调用hander hander名字是固定的
				handler(){
					window.localStorage.setItem("todos",JSON.stringify(this.todos));
				},
				// deep:true  true此时为深度监视
				deep:true
			}
		},
		methods:{
			// 添加任务
			handleAddToDo:function(e){
				// 拿到最后一个元素
				const lastTodo = this.todos[this.todos.length-1];
				const id = lastTodo?lastTodo.id+1:1;
				//获取DOM元素 console.log(e.target);
				// 添加逻辑
				//1.2 进行非空校验 if(e.target.value.trim().length !== 0){}
				if(e.target.value.trim().length !== 0){
					// 1.1 任务加入数组 获取数组添加数组
					this.todos.push({
					id:id,
					title:e.target.value,
					done:false
				    })
			    }
				// 2 清空文本框
				e.target.value="";
			},
			// 删除单个任务
			handleRemovetodo:function(index){
				//逻辑
				//删除数组元素
				// 原生js  数组.splice(删除开始的索引,删除的个数)
				this.todos.splice(index,1)
			},
			// 切换所有任务完成状态
			handleToggleAll:function(e){
				//控制台输出看看this指向的是什么 console.log(this);指向Vue实例
				//先获取当前状态
				const checked = e.target.checked;
				//控制台输出调试 console.log(checked);
				//让所有的任务完成状态与点击 全选/全不选状态一致
				//forEach 对这个数组从第一个元素开始循环 每次循环会调用element =>{} 这个函数
				this.todos.forEach(element => {
					// element => 箭头函数会涉及this.的问题  element就是每个元素的值 说白了就是个对象
					element.done = checked;
				});
				// //普通函数做 因为这个例子没有用到 this指向 
				//forEach函数的参数 假如是一个普通函数 this指向的是window
				//假如是一个箭头函数 箭头函数中this取决于外部环境  
				//     this.todos.forEach(
				// 		function(item){
				//    //控制台输出看看this指向的是什么 console.log(this);
				// 			item.done = checked;
				// 		}
				// 	);
			},
			//判断是否全选
			getToggleAllStatus:function(){
				let status = true;// 定义默认为true 在下面循环 发现有一个是false 将状态改为false
				//对数组循环
				this.todos.forEach(item =>{
					//思路 如果循环发现有一个是假的即有一个未完成 将状态改为false
					if(item.done === false ){
                       status = false; 
					}
				});
				return status;
			},
			//删除所有完成任务
			//ES6语法风格 handleClearAllDone(){alert(123);}
			handleClearAllDone:function(){
				//对任务列表进行循环 发现一个完成的就删除一个
				// this.todos.forEach((item,index)=>{
				// 	if (item.done === true){
				// 		this.todos.splice(index,1);
				// 		index--;  index-- forEach不允许自己维护index
				// 	}
				// });
				//上面实现不了 删除第一个 第二个要删除的就变成第一个了 逻辑第一个已经删除了 变成第一个的第二个就忽略没删除
				//用for if 循环
				for(let i=0; i<this.todos.length; i++){
					const item = this.todos[i];
					if (item.done === true){
						this.todos.splice(i,1);
						i--;
					}
				}
			},
			//获取所有未完成数量
			//换一种方法来做 用计算属性
			/*getRemaining(){
				let count = 0;
				this.todos.forEach(item=>{
					if (item.done === false){
						count++;
					}
				});
				return count;
			}
			*/
		},
	   // {计算属性}
		computed:{
            //获取所有未完成数量
			getRemaining(){
				let count = 0;
				this.todos.forEach(item=>{
					if (item.done === false){
						count++;
					}
				});
				return count;
			}
		}
	});

})(Vue);
